<template>
  <a-modal
    title="编辑主题管理"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    centered
    @cancel="handleCancel"
  >
    <div id="components-layout-demo-basic">
      <a-layout>
        <a-layout-sider width="50%" style="background: #fff">
          <a-spin :spinning="confirmLoading">
            <a-form :form="form">
              <a-form-item v-show="false"><a-input v-decorator="['checkedKeys']" /></a-form-item>
              <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
              <a-form-item label="主题名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
                <a-input
                  placeholder="请输入主题名称"
                  v-decorator="['name', { rules: [{ required: true, message: '请输入指标名称！' }] }]"
                />
              </a-form-item>
              <a-form-item label="主题描述" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
                <a-textarea
                  :auto-size="{ minRows: 4, maxRows: 8 }"
                  placeholder="请输入主题描述"
                  v-decorator="['describeMsg', { rules: [{ required: true, message: '请输入指标描述！' }] }]"
                />
              </a-form-item>
              <a-form-item label="行业分类" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
                <a-tree-select
                  v-decorator="['industryId', { rules: [{ required: true, message: '请选择行业分类！' }] }]"
                  show-search
                  tree-node-filter-prop="title"
                  allowClear
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  placeholder="请选择行业分类"
                  :treeData="industryTreeData"
                >
                </a-tree-select>
              </a-form-item>
            </a-form>
          </a-spin>
        </a-layout-sider>

        <a-layout-sider width="50%" style="background: #fff">
          <div>
            <a-tabs default-active-key="1">
              <a-tab-pane key="1" tab="指标分类">
                <a-layout-content :style="{ padding: '0 24px', height: '400px', overflowY: 'auto' }">
                  <a-tree

                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    v-model="checkedKeys"
                    checkable
                    :expanded-keys="expandedKeys"
                    :auto-expand-parent="autoExpandParent"
                    :selected-keys="selectedKeys"
                    :tree-data="treeData"
                    @expand="onExpand"
                    @select="onSelect"
                    style="width: 55%; height: 100%"
                  />
                </a-layout-content>
              </a-tab-pane>
              <a-tab-pane key="2" tab="POI标签" force-render>
                <a-layout-content :style="{ padding: '0 24px', height: '400px', overflowY: 'auto' }">
                  <a-tree
                    checkable
                    v-model="poiCheckedKeys"
                    :tree-data="poiTreeData"
                    @check="onPoiCheck"
                    :replaceFields="{ children: 'children', title: 'name', key: 'id' }"
                    style="width: 55%; height: 100%"
                  />
                </a-layout-content>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-layout-sider>
      </a-layout>
    </div>
  </a-modal>
</template>

<script>
import { allTree, themeEdit, themeTree, poiThemeTree } from '@/api/modular/main/theme/themeManage'
import { poiDataTagsListTree } from '@/api/modular/main/poidatatags/poiDataTagsManage'
import { industrySelectTree } from '@/api/modular/main/industry/industryManage'
export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      treeData: [],
      allNodes: [], // 递归所有子节点
      themeNodes: [], // 主题指标节点
      expandedKeys: [], // （受控）展开指定的树节点
      autoExpandParent: true,
      checkedKeys: [], // （受控）选中复选框的树节点
      poiCheckedKeys: [], // （受控）选中复选框的树节点
      selectedKeys: [],
      industryTreeData: [],
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      poiTreeData: []
    }
  },
  // 初始化时，加载所有树节点
  created() {
    const that = this
    allTree().then((res) => {
      that.treeData = res.data
    })
    this.selectPoiTree()
  },

  methods: {
    // poi类型多选 （树）
    selectPoiTree() {
      poiDataTagsListTree().then((res) => {
        if (res.success) {
          // this.poiTreeData = res.data
          console.info(res.data)
          this.poiTreeData = res.data
        }
      })
      industrySelectTree({}).then((res) => {
        if (res.success) {
          this.industryTreeData = res.data
        }
      })
    },
    // 初始化方法
    edit(record) {
      const that = this
      themeTree(record.id).then((res) => {
        that.themeNodes = res.data
        // 遍历获取所有子节点
        that.deepList(that.treeData)
        console.log('allNodes:' + that.allNodes)
        console.log('themeNodes:' + that.themeNodes)
        // themeNodes 后台拿到的结果，为字符串数组，存放的是节点id
        const result = [...new Set(that.allNodes)].filter((item) => new Set(eval(that.themeNodes)).has(item))
        console.log('result:' + result)
        // 将结果赋值给v-model绑定的属性
        this.checkedKeys = [...result]
      })
      poiThemeTree(record.id).then((res) => {
        that.poiCheckedKeys = res.data
      })
      setTimeout(() => {
        this.form.setFieldsValue({
          id: record.id,
          name: record.name,
          describeMsg: record.describeMsg,
          industryId: record.industryId
        })
      }, 100)
      this.visible = true
    },
    // 递归变量所有子节点以及没有子节点的节点
    deepList(data) {
      data.map((item) => {
        if (item.children && item.children.length > 0) {
          this.deepList(item.children)
        } else {
          // test数组存放
          this.allNodes.push(item.key)
        }
      })
    },
    handleSubmit() {
      const that = this
      console.log('选中的子节点：' + this.checkedKeys)
      this.form.setFieldsValue({
        checkedKeys: this.checkedKeys
      })
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          // for (const key in values) {
          //   if (typeof values[key] === 'object') {
          //     values[key] = JSON.stringify(values[key])
          //   }
          // }
          values.checkedPoiKeys = that.poiCheckedKeys
          themeEdit(values)
            .then((res) => {
              if (res.success) {
                this.$message.success('编辑成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error('编辑失败') //  + res.message
              }
            })
            .finally((res) => {
              this.confirmLoading = false
            })
          this.checkedKeys = []
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys)
      this.checkedKeys = checkedKeys
    },
    onPoiCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    }
  }
}
</script>

<style scoped lang="less">
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  //background-color: #8c8c8c;
  background-color: rgba(0, 0, 0, 0.25);
}

::-webkit-scrollbar-track {
  background-color: #f6f6f6;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border: 0;
}
</style>
